<template>
    <div style="
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      margin: 20px 0;
    ">
        <!-- 单选框 -->
        <el-radio-group v-model="radio" size="large">
            <el-radio-button label="sale_">销量</el-radio-button>
            <el-radio-button label="_money">销售额</el-radio-button>
        </el-radio-group>

        <!-- 选择器 -->
        <el-select v-model="select" placeholder="Select" size="large">
            <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>

    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div ref="pieDom" style="width: 100%; height: 400px"></div>
    <div ref="mapDom" style="width: 100%; height: 800px"></div>
</template>

<script setup lang="ts">
import * as api from "@/request/api";
import chinaJson from "@/json/china.json"
import { ref, onMounted, nextTick, watch } from "vue";
import type { IAdminStatRes } from "@/request/UmsAdminController/index";
import * as echarts from "echarts"; // 1. 引入echarts
type EChartsOption = echarts.EChartsOption; // 2 类型别名，用在options
let pieDom = ref(); // 3 获取饼图容器的DOM，需要在setup顶层就把变量和节点绑定在一起
let mapDom = ref(); // 3 获取地图容器的DOM，需要在setup顶层就把变量和节点绑定在一起

let result = {} as IAdminStatRes; // 图表的值
let pieChart: echarts.EChartsType; // 饼图图表
let mapChart: echarts.EChartsType; // 饼图图表
echarts.registerMap('china', chinaJson);
// 生成pieOption，把不一样的配置传进去
function generatePieOption(str: string) {
    return {
        tooltip: {
            trigger: "item", // 触发
            formatter: "{b}:{c} ({d}%)", // 内容处理 https://echarts.apache.org/zh/option.html#tooltip.formatter
        },
        // 调整图例的位置和宽度
        legend: {
            top: "5%",
            right: "100",
            width: "300px",
        },
        series: [
            {
                data: result.salePie.map((el) => {
                    return {
                        name: el.name,
                        value: Number(el[str]),
                    };
                }),
                name: "abc",
                type: "pie",
                radius: ["40%", "70%"],
                center: ["30%", "50%"], // 调整饼图的位置
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: "outer",
                },
                labelLine: {
                    show: true,
                },
            },
        ],
    };
}

async function getChartData() {
    // 4 拿到接口的数据
    result = await api.admin.getAdminStat();
    console.log(result);

    // 5 等到DOM更新后再渲染图表
    nextTick(() => {
        // let main = ref(); // 写在这里获取不到DOM
        pieChart = echarts.init(pieDom.value); // 6 初始化饼图实例

        // 6 指定饼图的配置项和数据
        let pieOption = generatePieOption("sale_yesterday") as EChartsOption;
        // let pieOption: EChartsOption = {
        //   tooltip: {
        //     trigger: "item", // 触发
        //     formatter: "{b}：{c} （{d}%）", // 内容处理 https://echarts.apache.org/zh/option.html#tooltip.formatter
        //   },
        //   // 调整图例的位置和宽度
        //   legend: {
        //     top: "5%",
        //     right: "100",
        //     width: "300px",
        //   },
        //   series: [
        //     {
        //       name: "abc",
        //       type: "pie",
        //       radius: ["40%", "70%"],
        //       center: ["30%", "50%"], // 调整饼图的位置
        //       avoidLabelOverlap: false,
        //       label: {
        //         show: true,
        //         position: "outer",
        //       },
        //       labelLine: {
        //         show: true,
        //       },
        //       data: result.salePie.map((el) => {
        //         return {
        //           name: el.name,
        //           value: Number(el.sale_yesterday),
        //         };
        //       }),
        //     },
        //   ],
        // };

        // 7 使用刚指定的配置项和数据显示图表。
        pieChart.setOption(pieOption);

        // 地图
        mapChart = echarts.init(mapDom.value); // 初始化地图实例
        let mapOption = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>销售:{c}%'
            },
            visualMap: {
                min: 100000,
                max: 850000,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['#254000', '#3f6600', '#5b8c00']
                },
                // top: "middle"
            },
            series: [
                {
                    type: 'map',
                    map: 'china',
                    label: {
                        show: true
                    },
                    data: result.saleMap.map((el) => {
                        return {
                            value: el.saleNum,
                            name: el.areaName,
                        }
                    })
                }
            ]
        };
        mapChart.setOption(mapOption)
    });
}
getChartData();

// 单选框
let radio = ref("sale_");
// 选择器
let select = ref("yesterday");
let selectOptions = [
    {
        value: "yesterday",
        label: "昨天",
    },
    {
        value: "today",
        label: "今天",
    },
    {
        value: "three_days",
        label: "前三天",
    },
    {
        value: "seven_days",
        label: "前七天",
    },
    {
        value: "fourteen_days",
        label: "前十四天",
    },
];
// 监听单选框和选择器的值的变化
watch([radio, select], (newVal) => {
    console.log(newVal);
    let str = "";
    if (newVal[0] === "_money") {
        str = newVal[1] + newVal[0];
    } else {
        str = newVal[0] + newVal[1];
    }

    // 6 指定饼图的配置项和数据
    let pieOption = generatePieOption(str);
    // let pieOption: EChartsOption = {
    //   tooltip: {
    //     trigger: "item", // 触发
    //     formatter: "{b}：{c} （{d}%）", // 内容处理 https://echarts.apache.org/zh/option.html#tooltip.formatter
    //   },
    //   // 调整图例的位置和宽度
    //   legend: {
    //     top: "5%",
    //     right: "100",
    //     width: "300px",
    //   },
    //   series: [
    //     {
    //       name: "abc",
    //       type: "pie",
    //       radius: ["40%", "70%"],
    //       center: ["30%", "50%"], // 调整饼图的位置
    //       avoidLabelOverlap: false,
    //       label: {
    //         show: true,
    //         position: "outer",
    //       },
    //       labelLine: {
    //         show: true,
    //       },
    //       data: result.salePie.map((el) => {
    //         return {
    //           name: el.name,
    //           value: Number(el[str]),
    //         };
    //       }),
    //     },
    //   ],
    // };

    // 7 使用刚指定的配置项和数据显示图表。
    pieChart.setOption(pieOption);
});
</script>
